<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input class="int" type="text" />
    <script>
        // 节流：让事件再一段时间之内执行一次
        function trottle(fn,delay){
            // 记录首次触发的当前时间戳 
            let nowTime = new Date().getTime();
            return function(){
                // console.log("返还的",this);
                let nowTime2 = new Date().getTime();
                if(nowTime2-nowTime>delay){
                    // fn();
                    // fn.call(this);
                    fn.apply(this,[...arguments]);
                    nowTime = new Date().getTime();
                }
            }
        }
        // function myfn (){
        //     console.log("myfn")
        // }
        // document.onmousemove =trottle( myfn,1000);

        let myInput = document.querySelector(".int");
        myInput.oninput = trottle(function(){
            console.log( this.value);
        },500)

        // myInput.oninput = function(){
        //     console.log( this.value);
        // }

        // 防抖 ：释放魔法前的摇;
        // 节流 ：释放魔法时候的cd;

    </script>
</body>
</html>